<template>
	<div class="w-200 h-200 bg-#000 ">
		<el-button @click="testFn">test</el-button>
		<el-button @click="testFn1">test1</el-button>
		<el-input v-model="test" @input="test = $setMaxLength(test, 10)"></el-input>
	</div>
</template>

<script>
import '../utils/common.scss'
import { downFileByBlob } from '@/utils/downFIleByBlob'
export default {
	data() {
		return {
			test: '2222'
		};
	},
	methods: {
		async testFn() {
			downFileByBlob({ path: 'http://192.168.33.89:8085/Cause/1.pdf', isDown: true, fileName: '23123.pdf' })
			// return
			// 假设你的服务器端点接受POST请求并返回PDF  
			// const url = 'http://192.168.33.89:8085/api/File/getFileStream'; // 你的服务器地址  

			// // POST数据（如果有的话）  
			// const postData = JSON.stringify({
			// 	// 这里是你要发送的数据
			// 	// 例如: key: 'value'  
			// 	url: 'http://192.168.33.89:8085/Cause/1.pdf'
			// });

			// fetch(url, {
			// 	method: 'POST', // 或者 'PUT'  
			// 	headers: {
			// 		'Content-Type': 'application/json',
			// 		// 如果服务器需要其他的头部信息，可以在这里添加  
			// 	},
			// 	body: postData
			// })
			// 	.then(response => {
			// 		console.log('response', response);
			// 		if (!response.ok) {
			// 			throw new Error(`HTTP error! status: ${response.status}`);
			// 		}

			// 		// 如果需要强制浏览器下载PDF而不是尝试显示它  
			// 		// 你可以设置Content-Disposition为attachment  
			// 		// 但通常这是服务器端的责任  
			// 		// 这里我们只是假设服务器已经正确设置了Content-Disposition  

			// 		// 返回一个Blob対象，表示PDF文件的内容  
			// 		return response.blob();
			// 	})
			// 	.then(blob => {
			// 		console.log('blob', blob);

			// 		// // 创建一个可下载文件的 URL
			// 		// const url = window.URL.createObjectURL(blob);
			// 		// // 在新标签页中打开文件
			// 		// window.open(url);
			// 		// // window.open(url, '_blank');
			// 		// setTimeout(function () {
			// 		// 	window.URL.revokeObjectURL(url);
			// 		// 	console.log('Blob URL has been revoked.');
			// 		// }, 500); // 5000 毫秒 = 5 秒  

			// 		// 创建一个指向Blob対象的URL  
			// 		const url = window.URL.createObjectURL(blob);

			// 		// 创建一个a标签用于下载  
			// 		const a = document.createElement('a');
			// 		a.href = url;
			// 		a.download = '1dsfsdfs.pdf'; // 设置下载文件的名称  
			// 		a.style.display = 'none';

			// 		// 触发a标签的点击事件来下载文件  
			// 		document.body.appendChild(a);
			// 		a.click();

			// 		// 清理  
			// 		window.URL.revokeObjectURL(url);
			// 		document.body.removeChild(a);
			// 	})
			// 	.catch(error => {
			// 		console.error('There has been a problem with your fetch operation:', error);
			// 	});

			// let dataJson = {
			// 	url: "http://192.168.33.89:8085/Cause/AMIS_Version_log.txt"
			// 	// url: "http://192.168.33.89:8085\\Cause\\AMIS_Version_log.txt"
			// 	// url: "http://192.168.33.89:8085/Cause/New A-MIS操作説明書.pdf"
			// 	// url: "http://192.168.33.89:8085/Cause/1.pdf"
			// 	// url: "http://localhost:3000/pdf"
			// };
			// const postData = JSON.stringify({
			// 	// url: "http://192.168.33.89:8085/Cause/AMIS_Version_log.txt"
			// 	// url: "http://192.168.33.89:8085\\Cause\\AMIS_Version_log.txt"
			// 	url: "http://192.168.33.89:8085/Cause/New A-MIS操作説明書.pdf"
			// 	// url: "http://192.168.33.89:8085/Cause/1.pdf"
			// 	// url: "http://localhost:3000/pdf"
			// });
			// let res = await getFileStream(postData);
			// // let res = await getFileStreamA(dataJson);
			// console.log('fsdfsdf', res.data);


			// // let blob = new Blob([new Uint8Array(res.data)], { type: 'application/pdf' });
			// let blob = new Blob([res.data], {
			// 	// type: "text/plain;charset=utf-8" // 使用正确的 MIME 类型并指定字符集
			// 	type: "application/pdf;" // 使用正确的 MIME 类型并指定字符集
			// 	// type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" // 使用正确的 MIME 类型并指定字符集
			// });

			// // 创建一个可下载文件的 URL
			// const url = window.URL.createObjectURL(blob);
			// // 在新标签页中打开文件
			// window.open(url);
			// // window.open(url, '_blank');
			// setTimeout(function () {
			// 	window.URL.revokeObjectURL(url);
			// 	console.log('Blob URL has been revoked.');
			// }, 10000); // 5000 毫秒 = 5 秒  


		},
		testFn1() {
			// let path = 'http://192.168.33.89:8085/Cause/1.pdf';
			// let path = 'http://192.168.33.89:8085/Cause/AMIS_Version_log.txt';
			// let path = 'http://192.168.33.89:8085\\Cause\\AMIS_Version_log.txt';
			let path = 'http://192.168.33.89:8085/Cause/New A-MIS操作説明書.pdf';
			fetch(path)
				.then(response => {
					if (!response.ok) {
						throw new Error('Failed to fetch PDF');
					}
					// 这里你可以直接返回response.body作为ReadableStream  
					// 或者，如果你需要Blob或ArrayBuffer，可以继续处理  
					return response.blob(); // 或者 response.arrayBuffer()  
				})
				.then(blob => {
					// 你可以在这里使用blob，例如创建一个Blob URL来下载或预览PDF
					// const url = window.URL.createObjectURL(blob);
					// const link = document.createElement('a');
					// link.href = url;
					// link.setAttribute('download', '1.pdf');
					// document.body.appendChild(link);
					// link.click();
					// window.URL.revokeObjectURL(url);
					// document.body.removeChild(link);
					// let blob = new Blob([blob], {
					// type: "text/plain;charset=utf-8" // 使用正确的 MIME 类型并指定字符集
					// type: "application/pdf;" // 使用正确的 MIME 类型并指定字符集
					// type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" // 使用正确的 MIME 类型并指定字符集
					// });

					// 创建一个可下载文件的 URL
					const url = window.URL.createObjectURL(blob);
					// 在新标签页中打开文件
					window.open(url);
					// window.open(url, '_blank');
					setTimeout(function () {
						window.URL.revokeObjectURL(url);
						console.log('Blob URL has been revoked.');
					}, 10000); // 5000 毫秒 = 5 秒  
				})
				.catch(error => {
					console.error('There has been a problem with your fetch operation:', error);
				});
		},
		async testFn2() {
			// 假设你的服务器端点接受POST请求并返回PDF  
			const url = 'http://localhost:3000/pdf'; // 你的服务器地址  

			// POST数据（如果有的话）  
			const postData = JSON.stringify({
				// 这里是你要发送的数据  
				// 例如: key: 'value'  
			});

			fetch(url, {
				method: 'POST', // 或者 'PUT'  
				headers: {
					'Content-Type': 'application/json',
					// 如果服务器需要其他的头部信息，可以在这里添加  
				},
				body: postData
			})
				.then(response => {
					if (!response.ok) {
						throw new Error(`HTTP error! status: ${response.status}`);
					}

					// 如果需要强制浏览器下载PDF而不是尝试显示它  
					// 你可以设置Content-Disposition为attachment  
					// 但通常这是服务器端的责任  
					// 这里我们只是假设服务器已经正确设置了Content-Disposition  

					// 返回一个Blob対象，表示PDF文件的内容  
					return response.blob();
				})
				.then(blob => {

					// 创建一个可下载文件的 URL
					const url = window.URL.createObjectURL(blob);
					// 在新标签页中打开文件
					window.open(url);
					// window.open(url, '_blank');
					setTimeout(function () {
						window.URL.revokeObjectURL(url);
						console.log('Blob URL has been revoked.');
					}, 10000); // 5000 毫秒 = 5 秒  

					// // 创建一个指向Blob対象的URL  
					// const url = window.URL.createObjectURL(blob);

					// // 创建一个a标签用于下载  
					// const a = document.createElement('a');
					// a.href = url;
					// a.download = 'example.pdf'; // 设置下载文件的名称  
					// a.style.display = 'none';

					// // 触发a标签的点击事件来下载文件  
					// document.body.appendChild(a);
					// a.click();

					// // 清理  
					// window.URL.revokeObjectURL(url);
					// document.body.removeChild(a);
				})
				.catch(error => {
					console.error('There has been a problem with your fetch operation:', error);
				});
		}
	},
	mounted() {
	}
};
</script>
<style scoped></style>